<template>
    <div class="login">
        <div class="top">
            <div class="logo">
                <img style="width:100%;height:100%" src="../../assets/image/peg.png" alt="">
            </div>
            <div class="text">
                <p style="font-weight: 1000;">{{msg}}</p>
            </div>
        </div>
        <div class="login_box">
            <el-card style="width:90%;height:80%" class="input_box">
                <el-divider content-position="left"><p style="font-size: 18px;">账号注册</p></el-divider>
                <el-form>
                    <el-form-item>
                        <el-input v-model="number" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="Invitation_code" placeholder="请输入邀请码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="number" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入验证码" v-model="Verification_Code">
                            <el-button v-if="Verification" slot="append" @click="get_Code()" style="width:150px">{{code_button}}</el-button>
                            <el-button v-if="!Verification" slot="append" disabled style="width:150px">{{code_button}}</el-button>
                        </el-input>
                    </el-form-item>
                    <el-button class="login_button" type="primary" @click="regist()">注册</el-button>
                    <div style="width:80%;text-align: right;">
                        <a class="number_login" @click="to_login()">密码登录</a>
                        <el-divider direction="vertical"></el-divider>
                        <a class="logon">手机验证码登录</a>
                        <el-divider direction="vertical"></el-divider>
                        <a class="logon">企业注册</a>
                    </div>
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: '数字鸽业精准管控云服务平台注册',
            code_button: '获取验证码',
            number: '',
            password: '',
            number: '',
            Verification: true,
            Verification_Code: '',//验证码
            Invitation_code: ''//邀请码
        }
    },
    methods: {
        get_Code() {
            this.Verification = false;
            this.code_button = 59;
            var t1 = setInterval(() => {
                this.code_button = this.code_button - 1;
            },1000)
            setTimeout(() => {
                clearInterval(t1)
                this.code_button = '重新获取'
                this.Verification = true
            },60000)
        },
        regist() {
            this.$message.success('注册成功')
            setTimeout(() => {
                this.$router.push('/login')
            },1000)
        },
        to_login() {
            this.$router.push('/login')
        }
    }
}
</script>

<style lang="scss" scoped>
.logo {
    position: relative;
    left: 15px;
    top: 7px;
    background-color: #2d8cf0;//rgb(20, 116, 206);//rgba(20, 184, 206,0);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #2d8cf0;//rgb(20, 116, 206);
    overflow: hidden;
}
.text {
    position: absolute;
    top: 20px;
    left: 80px;
    height: 100%;
    width: 100%;
    font-size: 22px;
}
.login {
    background-color: rgb(47, 135, 218);
    background: url("../../assets/image/peg.png");
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
.top {
    position: fixed;
    width: 100%;
    height: 70px;
    background-color: #fff;
    overflow: hidden;
    z-index: 9999;
}
.login_box {
    position: absolute;
    right: 25%;
    top: 2%;
    background-color: rgba(20, 184, 206,0);;
    width: 50%;
    height: 800px;
}
.input_box {
    margin: 0 auto;
    margin-top: 8%;
    box-sizing: border-box;
    padding: 10% 10%;
}
.el-input {
    width: 80%;
}
.login_button {
    width: 80%;
    margin: 20px auto;
}
.number_login,
.logon {
    color: #9b9ea0;
    text-decoration:none;
    font-size: 12px;
    cursor: pointer;
}
</style>